<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>审批记录</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link href="../../../css/mui.min.css" rel="stylesheet" />
    <link href="../css/common.css" rel="stylesheet" />
    <link href="../css/iconfont.css" rel="stylesheet" />
    <style>
      .fixed-title {
        width: 100%;
        background: #CFD8DE;
        /* padding: 6px 0; */
        display: flex;
        position: fixed;
        top: 44px;
        z-index: 99;
      }

      .fixed-title span {
        display: inline-block;
        /* width: 28%; */
        padding: 6px;
        font-size: 0.88em;
        text-align: center;
        box-sizing: border-box;
      }

      /* .fixed-title span:first-child {
        width: 15%;
      }

      .fixed-title span:last-child {
        width: 35%;
      } */

      .list {
        display: flex;
        position: relative;
        padding: 5px 0;
      }

      .list::after {
        position: absolute;
        content: '';
        height: 1px;
        background-color: #EEEEEE;
        bottom: 0;
        left: 15px;
        right: 15px;
      }

      .list>div {
        /* width: 25%; */
        padding: 6px;
        font-size: 16px;
        text-align: center;
        box-sizing: border-box;
        font-size: 14px;
        
      }

      /* .list>div:first-child {
        width: 15%;
      }

      .list>div:last-child {
        width: 35%;
      } */
      .mui-checkbox input[type=checkbox].checkbox{
       position: relative;
        top: 0;
        right: 0;
      }
      .footer{
        position: fixed;
        width: 100%;
        z-index: 9999;
        height: 44px;
        line-height: 44px;
        background-color: #fff;
        bottom: 0;
        padding: 0;
        text-align: center;
      }
    </style>
  </head>
  <body class="bg-white">
    <div id="container" v-cloak>
      <header class="mui-bar mui-bar-nav">
        <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
        <h1 class="mui-title">联系人</h1>
        <a class="mui-pull-right iconfont icon-bianji mui-right-icon" @click="edit()"> {{editShow?"完成":"编辑"}}</a>
      </header>
      <div class="fixed-title">
        <span v-show="editShow" style="width: 50px;"></span>
        <span class="flex-sub">姓名</span>
        <span class="flex-sub">联系方式</span>
        <span class="flex-sub">组织机构</span>
        <span class="flex-sub">来源</span>
      </div>
      <div class="mui-content bg-white"style="padding-top: 80px;">
        
        <!-- <div> -->
          <p class="padding-tb text-df text-grey text-center" v-if="list.length===0">暂无数据</p>
          <div class="list align-center" v-for="item in list">
            <div class="mui-checkbox" v-show="editShow" style="width: 50px;">
              <input name="checkbox" :value="item.id" type="checkbox" class="checkbox" v-model="checkModel"
                @change="checkChange()">
            </div>
            <div class="flex-sub">{{item.realname}}</div>
            <div class="flex-sub"><span class="text-blue" @click="Call(item)" v-if="item.phone!='null'">{{item.phone}} <span class="iconfont icon-dianhua" v-if="item.phone!='null'"></span></span></div>
            <div class="flex-sub">{{item.deptName}}</div>
            <div class="flex-sub">{{item.source}}</div>
          </div>
        <!-- </div> -->
        
      </div>
      <div class="footer flex shadow" v-if="editShow">
        <div class="flex-sub" @click="chooseAll">{{all?"取消全选":"全选"}}</div>
        <div class="flex-sub bg-red text-white" @click="Delete()">
          清除缓存
        </div>
      </div>
    </div>
    <script src="../../../js/mui.js"></script>
    <script src="../../../js/jquery-1.7.2.min.js"></script>
    <script src="../../../js/vue.js"></script>
    <script src="../js/sqlite.js"></script>
    <script>
      var contactsVM = null;
      var bdName = "files"; //数据库的名字
      var PName = "offlinePeople"; //责任人的名字
      mui.plusReady(function() {
        if (!validBdOpen(bdName)) {
          createDb(bdName)
        }
        select()
      })
      contactsVM = new Vue({
        el: '#container',
        data: {
          height1: 0, // 列表高度
          editShow: false,
          list: [],
          checkModel: [],
          all: false
        },
        created: function() {
          
        },
        methods: {
          // 打电话
          Call: function(item) {
            var that = this;
            if (item.phone == "") {
              return;
            }
            mui.confirm('您确定要给' + item.realname + '打电话吗?', ' ', ['确认', '取消'], function(result) {
              if (result.index == 0) {
                plus.device.dial(item.phone, false);
              }
            }, 'div')
          },
          edit() {
            this.editShow = !this.editShow
            this.checkModel = []
          },
          checkChange() {
            var that = this;
            console.log(that.checkModel)
            var ids = []
            that.list.forEach(function(item, index) {
              ids.push(item.id);
            })
            if (that.checkModel.sort().toString() === ids.sort().toString()) {
              that.all = true
            } else {
              that.all = false
            }
          },
          chooseAll() {
            var that = this;
            if (!that.all) {
              that.list.forEach(function(item, index) {
                that.checkModel.push(item.id);
              })
            } else {
              that.checkModel = []
            }
            that.all = !that.all;
          },
          Delete() {
            var that = this;
            var btnArray = ['取消', '确定'];
            mui.confirm('确定删除吗？', '提示', btnArray, function(e) {
              if (e.index == 1) {
                that.checkModel.forEach((item, index1) => {
                  selectListSQL(bdName, "delete from " + PName + " WHERE id ='" + item + "'", function(
                    data) {
                    select()
                  });
                })
              } else {
          
              }
            })
          }
        }
      })
      function select() {
        selectListSQL(bdName, "select * from " + PName + "",
          function(data) {
            console.log('查出数据表数据' + JSON.stringify(data));
            contactsVM.list=[];
            if (data.length > 0) {
              contactsVM.list = data;
            }
          })
      }
    </script>
  </body>
</html>
